<template>
  <div class="cate-container">
    <!-- 分类tree控件 -->
    <el-tree v-if="showTree" :data="category" :props="setProps" node-key="cat_id" :expand-on-click-node="false" default-expand-all>
      <span :class="['custom-tree-node', data.cat_level === 0 ? 'catOne' : '']" slot-scope="{ node, data }">
        <!-- 下方node.label等价于data.cat_name -->
        <span class="cate-title">{{ node.label }}</span>
        <span class="cate-img-container">
          <el-image class="cate-img" v-if="data.cat_level === 2" :src="data.cat_icon"></el-image>
        </span>
        <span class="cate-btn">
          <el-button v-if="data.cat_level === 0" type="text" size="mini" @click="() => append(data)"> 添加二级分类 </el-button>
          <el-button v-if="data.cat_level === 1" type="text" size="mini" @click="() => append(data)"> 添加三级分类 </el-button>
          <el-popconfirm title="确定删除该分类？" class="popconfirm" @onConfirm="remove(data)">
            <el-button slot="reference" type="text" size="mini"> 删除 </el-button>
          </el-popconfirm>
        </span>
      </span>
    </el-tree>
    <!-- 添加一级分类按钮 -->
    <div class="add-one-cate">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="() => append()"> 添加一级分类 </el-button>
    </div>
    <!-- 添加分类的dialog弹框 -->
    <el-dialog :title="addCateTip" :visible.sync="dialogVisible" width="40%">
      <span>
        <el-form ref="form" :model="addCateform" :rules="rules" label-width="80px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateform.cat_name" placeholder="请输入分类名称" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item label="分类图片" v-if="uploadVisible" prop="cat_icon">
            <el-upload class="avatar-uploader" action="#" :http-request="handleUpload" :show-file-list="false" :before-upload="beforeAvatarUpload">
              <img v-if="addCateform.cat_icon" :src="addCateform.cat_icon" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取 消</el-button>
        <el-button type="primary" @click="addCateSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  data() {
    return {
      showTree: false,
      // 自定义使用哪个数据字段
      setProps: {
        children: 'children',
        label: 'cat_name'
      },
      // 控制dialog弹出框的显示与隐藏
      dialogVisible: false,
      // 添加分类的dialog弹出框的提示标题
      addCateTip: '',
      // 添加分类的表单数据
      addCateform: {
        cat_name: '',
        cat_icon: '',
        cat_pid: 0,
        cat_level: 0
      },
      // 控制upload上传图片组件的显示与隐藏（只有上传三级分类时显示）
      uploadVisible: false,
      // 表单验证规则
      rules: {
        cat_name: [{ required: true, message: '请输入分类名称' }],
        cat_icon: [{ required: true, message: '请上传分类图片' }]
      }
    }
  },
  created() {
    this.getCategory()
  },
  computed: {
    ...mapState('goods', ['category'])
  },
  methods: {
    ...mapMutations('goods', ['getCategory']),
    // 添加子分类
    append(data) {
      // 拼接出提示标题，修改cat_pid和cat_level
      if (!data) {
        this.addCateTip = '添加一级分类'
        this.addCateform.cat_pid = 0
        this.addCateform.cat_level = 0
        this.addCateform.cat_icon = '/full/none.jpg'
      } else if (data.cat_level === 0) {
        this.addCateTip = '添加（' + data.cat_name + '）下的二级分类'
        this.addCateform.cat_pid = data.cat_id
        this.addCateform.cat_level = 1
        this.addCateform.cat_icon = '/full/none.jpg'
      } else {
        const parentCateName = this.category.find(item => item.cat_id === data.cat_pid).cat_name
        this.addCateTip = '添加（' + parentCateName + ' > ' + data.cat_name + '）下的三级分类'
        this.addCateform.cat_pid = data.cat_id
        this.addCateform.cat_level = 2
      }
      this.dialogVisible = true
      // 根据提示的标题，计算出是否展示上传图片组件（只有添加三级分类时展示）
      const strArr = this.addCateTip.split('的')
      if (strArr[1] && strArr[1] === '三级分类') this.uploadVisible = true
      else this.uploadVisible = false
    },
    // 控制上传图片类型和大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传分类图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传分类图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
    },
    // 自定义upload上传分类图片
    handleUpload(data) {
      const file = data.file
      // this.addCateform.cat_icon = URL.createObjectURL(file)
      // 使用FileReader对象的readAsDataURL方法来读取图像文件，在Data URL协议中，图片被转换成base64编码的字符串形式
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onloadend = () => (this.addCateform.cat_icon = reader.result) // 将文件（file）转换成base64字符串
    },
    // 添加分类的“确定”按钮处理函数
    addCateSubmit() {
      // 表单验证
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await this.$http({ url: '/api/public/v1/admin/addcategory', data: { newCate: this.addCateform }, method: 'post' })
          if (res.meta.status !== 200) return this.$message.error('添加分类失败')
          this.$message.success('添加分类成功')
          // 重新获取分类数据
          this.getCategory()
          // 清除form表单数据、表单验证信息，隐藏dialog弹框
          this.clearForm()
        } else {
          return false
        }
      })
    },
    // 清除form表单数据、表单验证信息，隐藏dialog弹框
    clearForm() {
      // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.dialogVisible = false
      this.addCateform.cat_icon = ''
      this.$refs.form.resetFields()
    },
    // 删除分类
    async remove(data) {
      // 根据分类id删除分类
      const cat_id = data.cat_id
      const res = await this.$http({ url: '/api/public/v1/admin/deletecategory', data: { cat_id }, method: 'post' })
      if (res.meta.status !== 200) return this.$message.error('删除分类失败')
      this.$message.success('删除分类成功')
      this.getCategory()
    }
  },
  watch: {
    // 监听vuex仓库中的商品分类信息，有信息返回时，渲染树控组件（解决刚开始页面渲染无数据）
    category(newVal, oldVal) {
      if (newVal.length !== 0) this.showTree = true
    }
  }
}
</script>

<style lang="scss">
.cate-container {
  padding: 0 10%;
  // padding-right: 50%;
  .custom-tree-node {
    width: 600px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    // border-bottom: 1px solid #000;
    .cate-title {
      width: 20%;
    }
    .cate-img-container {
      // width: 50%;
      .cate-img {
        width: 50px;
        height: 50px;
        border: 1px solid #efefef;
      }
    }

    .cate-btn {
      width: 30%;
      text-align: right;
      .popconfirm {
        margin-left: 15px;
      }
    }
  }
  .catOne {
    background-color: #efefef;
  }
  .add-one-cate {
    margin: 20px 0 50px 0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
// 设置高度自适应（被图片高度50px撑起来）
.el-tree-node__content {
  height: auto;
  // border-bottom: 1px solid #000;
}
</style>
